import React from 'react'
import ReactDOM from 'react-dom'

/* 
  - 评论列表案例
  - 需求1： 渲染评论列表数据
    - ul>li>(h3+p)
  - 需求2： 如果有评论数据，就渲染类表；如果没有评论数据，就渲染 p 标签： 暂无评论
  - 需求3： 添加自己喜欢的样式（ 使用 className 添加 ）

  ```js
  const comments = [
    { id: 1, name: 'jack', content: 'rose, you jump i look~' },
    { id: 2, name: 'rose', content: '你是什么垃圾？？？' },
    { id: 3, name: '老王', content: '你喜欢绿色吗？' },
  ]
  ```
*/

import './index.css'

const comments = [
  { id: 1, name: 'jack', content: 'rose, you jump i look~' },
  { id: 2, name: 'rose', content: '你是什么垃圾？？？' },
  { id: 3, name: '老王', content: '你喜欢绿色吗？' }
]

function renderComments () {
  // 判断数组中有没有评论数据
  if (comments.length <= 0) {
    // 没有评论数据
    return <p>暂无评论</p>
  }

  return (
    <ul>
      {comments.map(item => (
        <li key={item.id}>
          <h3>评论人：{item.name}</h3>
          <p>评论内容：{item.content}</p>
        </li>
      ))}
    </ul>
  )
}

const title = <div className="comments">{renderComments()}</div>

ReactDOM.render(title, document.getElementById('root'))
